<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>商城商城首页</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			body {
				background-color: #FFFFFF;
			}

			.aui-bar-nav {
				background-color: #FFFFFF;
				color: #212121;
			}

			.aui-bar-nav .aui-pull-right {
				padding: 0 0.75rem;
			}

			.aui-bar-nav .aui-pull-left {
				margin-left: 0.75rem;
				height: 1.7rem;
				line-height: 1.7rem;
				background-color: #F5F5F5;
				border-radius: 0.25rem;
				margin-top: 0.275rem;
				width: calc(100vw - 3.25rem);
				width: -webkit-calc(100vw - 3.25rem);
			}

			.aui-bar-tab .aui-active {
				color: #6FBAFF;
			}

			.aui-tab-item.aui-text-linear:after {
				content: '';
				position: absolute;
				width: 1.2rem;
				bottom: -1px;
				height: 2px;
				left: 50%;
				margin-left: -0.6rem;
				background-color: #CE00FF;
			}

			.aui-bar-tab-item img {
				display: inline-block;
				width: 1.1rem;
			}

			.aui-bar-tab .aui-bar-tab-item {
				height: 2.4rem;
			}

			.aui-bar-tab .aui-bar-tab-label {
				display: block;
				font-size: 0.6rem;
				position: initial;
				line-height: 0.5;
			}

			.ming-bg-app {
				background-color: RGBA(105, 0, 120, 1) !important;
			}

			#aui-header .aui-tab-item {
				font-size: 0.8rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div id="aui-header" :class="{'ming-bg-white':index!=4,'ming-bg-app':index==4}">
				<header v-if="index==0" class="aui-bar aui-bar-nav aui-border-b">
					<div class="aui-pull-left" style="" tapmode onclick="openWin_Search()">
						<img style="width: 1rem;display: inline-block;" src="../image/btn/btn-search.png" />
						<span style="font-size: 13px;color: #999999;">请输入商品名称</span>
					</div>
					<a class="aui-pull-right aui-btn" tapmode onclick="open_message()">
						<img style="width: 1rem;" src="../image/btn/btn-message.png" />
						<div v-if="unread_msg_num>0" class="aui-dot"></div>
					</a>
				</header>
				<header v-if="index==1" class="aui-bar aui-bar-nav aui-border-b" tapmode onclick="openWin_Search()">
					<div class="aui-pull-left" style="width: calc(100vw - 1.5rem);margin-right: 0.75rem;border-radius: 0.9rem;">
						<img style="width: 1rem;display: inline-block;margin-left: 0.75rem;margin-right: 0.25rem;" src="../image/btn/btn-search.png" />
						<span style="font-size: 13px;color: #999999;">请输入商品名称</span>
					</div>
				</header>
				<header v-if="index==2" class="aui-bar aui-bar-nav aui-border-b">
					<div v-if="circle_index!=1|circle_index!=2" class="aui-title aui-text-linear">
						会员圈
					</div>
					<div v-if="circle_index==1" class="aui-title">
						<div class="aui-tab">
							<div class="aui-tab-item" :class="{'aui-text-linear':xiaoxun_index=='new'}" tapmode onclick="tapxiaoxun_index('new')">
								最新发布
							</div>
							<div class="aui-tab-item" :class="{'aui-text-linear':xiaoxun_index=='zan'}" tapmode onclick="tapxiaoxun_index('zan')">
								被赞最多
							</div>
						</div>
					</div>
					<div v-if="circle_index==2" class="aui-title">
						<div class="aui-tab">
							<div class="aui-tab-item" :class="{'aui-text-linear':xiaoyou_index=='new'}" tapmode onclick="tapxiaoyou_index('new')">
								最新发布
							</div>
							<div class="aui-tab-item" :class="{'aui-text-linear':xiaoyou_index=='zan'}" tapmode onclick="tapxiaoyou_index('zan')">
								被赞最多
							</div>
						</div>
					</div>
					<a class="aui-pull-right aui-btn" tapmode onclick="openWin_Search()">
						<img style="width: 1rem;" src="../image/btn/btn-search-app.png" />
					</a>
				</header>
				<header v-if="index==3" class="aui-bar aui-bar-nav aui-border-b">
					<div class="aui-title aui-text-linear">
						购物车<span v-if="cart_number>0">({{cart_number}})</span>
					</div>
					<a class="aui-pull-right aui-btn" style="color: RGBA(105, 0, 120, 1);" tapmode onclick="tapcart_btn()">
						<span class="aui-text-linear" v-if="!cart_bianji">编辑</span>
						<span v-if="cart_bianji">完成</span>
					</a>
				</header>
				<header v-if="index==4" class="ming-bg-opacity0">
				</header>
			</div>
			<footer class="aui-bar aui-bar-tab" id="footer">
				<div class="aui-bar-tab-item aui-border-t" :class="{'aui-active':index=='0'}" tapmode onclick="tapindex(0)">
					<img v-if="index!='0'" src="../image/btn/btn-home.png" />
					<img v-if="index=='0'" src="../image/btn/btn-home-active.png" />
					<div class="aui-bar-tab-label">首页</div>
				</div>
				<div class="aui-bar-tab-item aui-border-t" :class="{'aui-active':index=='1'}" tapmode onclick="tapindex(1)">
					<img v-if="index!='1'" src="../image/btn/btn-class.png" />
					<img v-if="index=='1'" src="../image/btn/btn-class-active.png" />
					<div class="aui-bar-tab-label">分类</div>
				</div>

				<!-- <div class="aui-bar-tab-item aui-border-t" :class="{'aui-active':index=='1'}" tapmode onclick="tapindex(1)">
					<img v-if="index!='2'" src="../image/btn-circle.png" />
					<img v-if="index=='2'" src="../image/btn/btn-circle-active.png" />
					<div class="aui-bar-tab-label">会员圈</div>
				</div> -->

				<!-- <div class="aui-bar-tab-item aui-border-t" :class="{'aui-active':index=='2'}" tapmode onclick="tapindex(2)">
					<img v-if="index!='2'" src="../image/btn/btn-circle.png" />
					<img v-if="index=='2'" src="../image/btn/btn-circle-active.png" />
					<div class="aui-bar-tab-label">会员圈</div>
				</div> -->

				<div class="aui-bar-tab-item aui-border-t" :class="{'aui-active':index=='3'}" tapmode onclick="tapindex(3)">
					<img v-if="index!='3'" src="../image/btn/btn-cart.png" />
					<img v-if="index=='3'" src="../image/btn/btn-cart-active.png" />
					<div class="aui-bar-tab-label">购物车</div>
				</div>
				<div class="aui-bar-tab-item aui-border-t" :class="{'aui-active':index=='4'}" tapmode onclick="tapindex(4)">
					<img v-if="index!='4'" src="../image/btn/btn-my.png" />
					<img v-if="index=='4'" src="../image/btn/btn-my-active.png" />
					<div class="aui-bar-tab-label">我的</div>
				</div>
			</footer>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/vue.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/aui-actionsheet.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				index: 0,
				circle_index: 0,
				cart_number: 0,
				xiaoxun_index: 'new',
				xiaoyou_index: 'new',
				cart_bianji: false,
				login_status: false,
				unread_msg_num: 0
			},
			methods: {
				init: function() {
					var headerPos = $api.offset($api.byId('aui-header'))
					var footerPos = $api.offset($api.byId('footer'))
					api.openFrameGroup({
						name: 'IndexGroup',
						background: 'bgcolor',
						scrollEnabled: false,
						vScrollBarEnabled: false,
						hScrollBarEnabled: false,
						rect: {
							x: 0,
							y: headerPos.h,
							w: api.winWidth,
							h: api.winHeight - headerPos.h - footerPos.h
						},
						preload: '0',
						index: vm.index,
						frames: [{
							name: 'home',
							url: 'home.html',
							bgColor: 'bgcolor',
							bounces: false
						}, {
							name: 'class',
							url: './class.html',
							bgColor: 'bgcolor',
							bounces: false
						}, {
							name: 'circle',
							url: './circle.html',
							bgColor: 'bgcolor',
							bounces: true
						}, {
							name: 'cart',
							url: './cart.html',
							bgColor: 'bgcolor',
							bounces: false
						}, {
							name: 'my',
							url: './my.html',
							bgColor: 'bgcolor',
							bounces: false
						}, ]
					}, function(ret, err) {});
				}
			}
		})
		apiready = function() {
			keyback()
			$api.fixStatusBar($api.byId('aui-header'))
			$api.fixTabBar($api.byId('footer'))
			api.setStatusBarStyle({
				style: 'dark'
			});
			vm.init()
			add_event('circle_index', function(ret) {
				vm.circle_index = ret.index;
				vm.xiaoxun_index = 'new'
				vm.xiaoyou_index = 'new'
			})
			add_event('cart_number', function(ret) {
				vm.cart_number = ret.count
			})
			add_event('read_msg_all', function(ret) {
				vm.unread_msg_num = 0
			})
			add_event('read_msg', function(ret) {
				authToken()
			})
			authToken()
			first_open()
			jpushInit()
			//			监听增加了新的提醒事件
			add_event('loginout', function(ret) {
				vm.login_status = false
			})
			add_event('logined', function(ret) {
				vm.login_status = true
			})
			add_event('remind_add', function(ret) {
				remind()
			})
			add_event('goto_miaosha', function(ret) {
				open_win('miaosha_goods_list', 'goods/miaosha_goods_list.html', false);
				remind()
			})
			remind()
		};
		function open_message(){
			if (vm.login_status) {
				openWin_message()
			}else{
				openWin_login()
			}
		}
		function tapindex(index) {
			if(vm.index != index) {
				vm.index = index
				api.setFrameGroupIndex({
					name: 'IndexGroup',
					index: index
				});
				if(vm.index == 4) {
					api.setFrameGroupIndex({
						name: 'IndexGroup',
						index: index
					});
					var footerPos = $api.offset($api.byId('footer'))
					api.setFrameGroupAttr({
						name: 'IndexGroup',
						rect: {
							x: 0,
							y: 0,
							w: api.winWidth,
							h: api.winHeight - footerPos.h
						}
					});
					send_event('logined')
				} else {
					if(vm.index == 3) {
						send_event('cart_ref')
					}
					setTimeout(function() {
						var headerPos = $api.offset($api.byId('aui-header'))
						var footerPos = $api.offset($api.byId('footer'))
						api.setFrameGroupAttr({
							name: 'IndexGroup',
							rect: {
								x: 0,
								y: headerPos.h,
								w: api.winWidth,
								h: api.winHeight - headerPos.h - footerPos.h
							}
						});
					}, 20)
				}
			}
		}

		function tapxiaoxun_index(index) {
			if(vm.xiaoxun_index != index) {
				vm.xiaoxun_index = index
				send_event('circle_flag', {
					flag: index
				})
			}
		}

		function tapxiaoyou_index(index) {
			if(vm.xiaoyou_index != index) {
				vm.xiaoyou_index = index
				send_event('circle_flag', {
					flag: index
				})
			}
		}

		function tapcart_btn() {
			vm.cart_bianji = !vm.cart_bianji
			send_event('cart_bianji', {
				status: vm.cart_bianji
			})
		}

		function openTocart() {
			send_event('cart_ref')
			tapindex(3)
		}

		function authToken() {
			if($api.getStorage('token')) {
				get_data('api/login/isToken', {
					token: $api.getStorage('token')
				}, function(ret) {
					if(ret.status == '0') {
						$api.rmStorage('token')
						send_event('loginout')
						openWin_login()
					}
					if(ret.status == '1') {
						vm.login_status = true
						vm.unread_msg_num = ret.data.unread_msg_num
						if (ret.data.unread_msg_num==0) {
							send_event('read_msg_all')
						}
					}
				})
			} else {
				openWin_login()
			}
		}

		function first_open() {
			if(!$api.getStorage('first_open')) {
				open_win('launch', 'launch.html', false)
				$api.setStorage('first_open', '1')
			}
		}

		function jpushInit() {
			ajpush = api.require('ajpush');
			if(api.systemType == 'android') {
				//极光初始化,只有安卓系统需要执行这一步骤
				ajpush.init(function(ret) {
					console.log('初始化' + JSON.stringify(ret))
				});
			}
			//绑定别名
			if($api.getStorage('userinfo') && $api.getStorage('userinfo').id) {
				console.log('准备绑定别名')
				var param = {
					alias: $api.getStorage('userinfo').id
				};
				ajpush.bindAliasAndTags(param, function(ret) {
					var statusCode = ret.statusCode;
					console.log('绑定别名' + JSON.stringify(ret))
				});
			}
			//安卓接收推送信息
			api.addEventListener({
				name: 'appintent'
			}, function(ret, err) {
				//				alert('被点击了' + JSON.stringify(ret))
				//				return;
				if(ret && ret.appParam.ajpush) {
					var ajpush = ret.appParam.ajpush;
					var id = ajpush.id;
					var title = ajpush.title;
					var content = ajpush.content;
					//安卓设备接收到的是字符串类型
					//将安卓接收到的字符串类型转化为json对象
					var extra = ajpush.extra;
					if(extra.type == '孝讯' || extra.type == '孝友秀') {
						openWin_circle_details(extra.source_id)
					}
					if(extra.type == '商品') {
						openWin_goods_detail(extra.source_id)
					}
					if(extra.type == '售后') {
						openWin_aftersale_detail(extra.source_id)
					}
					if(extra.type == '订单') {
						openWin_order_detail(extra.source_id)
					}
					if(extra.type == '物流') {
						openWin_logistics_detail(extra.source_id)
					}
					if(extra.type == '通知') {
						open_win('my_message', 'my/my_message.html', true)
					}
					if(extra.type == '优惠券') {
						open_win('coupon', 'my/coupon.html', false)
					}
					//点击以后需要去掉一次角标
					api.setAppIconBadge({
						badge: 0
					});
				}
			})
			//安卓接收推送信息结束
			//
			//
			//IOS接收推送信息
			//IOS接收推送信息(经测试，app不杀死及杀死的情况下只要APP处于后台中可以正常跳转，单独用着一个方法就行。)
			api.addEventListener({
				name: 'noticeclicked'
			}, function(ret, err) {
				if(ret && ret.value) {
					api.setAppIconBadge({
						badge: 0
					});
					var ajpush = ret.value;
					var content = ajpush.content;
					var extra = ajpush.extra;
					if(extra.type == '孝讯' || extra.type == '孝友秀') {
						openWin_circle_details(extra.source_id)
					}
					if(extra.type == '商品') {
						openWin_goods_detail(extra.source_id)
					}
					if(extra.type == '售后') {
						openWin_aftersale_detail(extra.source_id)
					}
					if(extra.type == '订单') {
						openWin_order_detail(extra.source_id)
					}
					if(extra.type == '物流') {
						openWin_logistics_detail(extra.source_id)
					}
					if(extra.type == '通知') {
						open_win('my_message', 'my/my_message.html', true)
					}
					if(extra.type == '优惠券') {
						open_win('coupon', 'my/coupon.html', false)
					}
					//点击以后需要去掉一次角标
					ajpush.setBadge({
						badge: 0
					});
				}
			});
			//ios接收前台推送信息
			ajpush.setListener(function(ret) {
				//				console.log(JSON.stringify(ret))
				var id = ret.id;
				var title = ret.title;
				var content = ret.content;
				var extra = ret.extra;
				//IOS前台接受到消息以后已弹出询问框的形式提醒用户
				api.confirm({
					title: '新的消息',
					msg: content,
					buttons: ['阅读', '取消']
				}, function(ret, err) {
					var index = ret.buttonIndex;
					if(index == 1) {
						if(extra.type == '孝讯' || extra.type == '孝友秀') {
							openWin_circle_details(extra.source_id)
						}
						if(extra.type == '商品') {
							openWin_goods_detail(extra.source_id)
						}
						if(extra.type == '售后') {
							openWin_aftersale_detail(extra.source_id)
						}
						if(extra.type == '订单') {
							openWin_order_detail(extra.source_id)
						}
						if(extra.type == '物流') {
							openWin_logistics_detail(extra.source_id)
						}
						if(extra.type == '通知') {
							open_win('my_message', 'my/my_message.html', true)
						}
						if(extra.type == '优惠券') {
							open_win('coupon', 'my/coupon.html', false)
						}
					}
				});
			});
		};
		var timeset;
		function remind() {
			var data = $api.getStorage('remind')
			console.log(JSON.stringify(data))
			if(!data || data.length == 0) {
				$api.rmStorage('remind')
				log('暂无提醒')
				return;
			}
			clearTimeout(timeset)
			data = data.sort(compare('time'))
			var nowtime = Date.parse(new Date()) / 1000
			var newdata = [];
			data.forEach(function(el, index) {
				if(nowtime < el.time) {
					newdata.push(el)
				}
			})
			if(newdata.length == 0) {
				$api.rmStorage('remind')
				log('提醒都过期了')
				return;
			}
			var lefttime = (newdata[0].time - nowtime) * 1000;
			timeset = setTimeout(function() {
				api.closeToWin({
					name: 'root'
				});
				setTimeout(function() {
					api.openFrame({
						name: 'remind',
						url: 'remind.html',
						bounces: false,
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						},
						vScrollBarEnabled: false,
						bgColor: 'rgba(0,0,0,0)'
					})
				}, 300)
			}, lefttime)
			$api.setStorage('remind', newdata)
		}
		function compare(property) {
			return function(a, b) {
				var value1 = a[property];
				var value2 = b[property];
				return value1 - value2;
			}
		}
	</script>

</html>
